<template>
  <el-row style="margin-bottom:14px;" class="comment">
    <el-input
      v-model="comment"
      type="textarea"
      :rows="4"
      :autosize="{ minRows: 4, maxRows: 6 }"
      placeholder="政治、色情、喷骂、引战、机型喷、水军、广告等违法违规行为将被封号。"
    >
    </el-input>
    <div class="comment__button">
      <el-button type="primary" size="small" @click.prevent.stop="submit"
        >提交</el-button
      >
    </div>
  </el-row>
</template>

<script>
export default {
  props: {
    addComment: {
      type: Function,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      comment: ''
    }
  },
  methods: {
    submit() {
      const comment = this.comment.trim()
      if (comment) {
        this.addComment(this.id, this.comment)
        this.comment = ''
      } else {
        this.$message({
          message: '请输入内容',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comment {
  position: relative;
}
.comment__button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  @include flexCenter($jc: flex-end);
}
</style>
